<template>
    <div class="page">
        <div class="main-title">
            <div class="left">公司名称</div>
            <el-row class="content">
                <el-col :span="8">
                    <div >
                        <span>企业ID：</span>
                        <span>
                           {{info.companyId}}
                        </span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div >
                        <span>法人代表：</span>
                        <span>
                           111
                        </span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div >
                        <span>注册时间：</span>
                        <span>
                           111
                        </span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div >
                        <span>联系人：</span>
                        <span>
                           {{info.contacts}}
                        </span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div >
                        <span>联系电话：</span>
                        <span>
                           {{info.contactNumber}}
                        </span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div >
                        <span>邮箱：</span>
                        <span>
                           {{info.email}}
                        </span>
                    </div>
                </el-col>
                <el-col :span="8">
                    <div >
                        <span>公司地址：</span>
                        <span>
                           {{ info.address }}
                        </span>
                    </div>
                </el-col>
            </el-row>
        </div>

        <div class="page-ctx">
            <div class="left">采购订单</div>
            <div class="flex searchDiv">
                <div class="flex mgr48">
                    <span>订单编号：</span>
                    <span>
                        <el-input class="" v-model="orderCode"></el-input>
                    </span>
                </div>
                <div class="flex">
                    <span>订单状态：</span>
                    <span>
                        <el-select v-model="orderStatus" placeholder="请选择">
                            <el-option label="待付款" value="0"></el-option>
                            <el-option label="待发货" value="1"></el-option>
                            <el-option label="待收货" value="2"></el-option>
                            <el-option label="部分退款" value="3"></el-option>
                            <el-option label="已关闭" value="4"></el-option>
                        </el-select>
                    </span>
                </div>
                <button type="primary" class="btn-search" @click="do_search()">搜索</button>
                <button type="primary" class="btn-reset" @click="do_rest()">重置</button>
            </div>
            <div class="fav-box">
               

                <div class="fav-data-box" >
                    <el-table :data="product_list" header-cell-style="background: #F5F5F5;" align="center">
                        <el-table-column
                          prop="orderCode"
                          label="订单编号"
                         >
                        </el-table-column>
                        <el-table-column
                          prop="actualPrice"
                          label="订单金额"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="createTime"
                          label="下单日期"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="purchaser.purchaserName"
                          label="采购员"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="orderStatusStr"
                          label="订单状态"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="payTypeStr"
                          label="支付方式"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="paymentSettlementStatusStr"
                          label="结款状态"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="settlementAmount"
                          label="已结金额"
                          >
                        </el-table-column>
                        <el-table-column
                          prop="surplusAmount"
                          label="未结金额"
                          >
                        </el-table-column>
                    </el-table>
                    <div class="zongjie">
                        <el-row>
                            <el-col :span="6">
                                <div>订单笔数总计</div>
                                <div class="mb10">{{totalObj.orderSize}}</div>
                            </el-col>
                            <el-col :span="6">
                                <div>订单总金额</div>
                                <div class="mb10">{{totalObj.orderAllAmounts.toFixed(2)}}</div>
                            </el-col>
                            <el-col :span="6">
                                <div>已结款总金额</div>
                                <div class="mb10">{{ totalObj.allPayAmount.toFixed(2) }}</div>
                            </el-col>
                            <el-col :span="6">
                                <div>未结款总金额</div>
                                <div class="mb10">{{totalObj.allSurplusAmount.toFixed(2)}}</div>
                            </el-col>

                        </el-row>
                    </div>
                    <div class="pagination-box" style="margin-top: 40px;text-align: right;">
                        <el-pagination background layout="total, prev, pager, next" @current-change="mix_current_change"
                            :current-page.sync="pagination.page" :page-size="pagination.pageNum"
                            :total="count"></el-pagination>
                    </div>
                </div>
                <!-- <div class="fav-empty" v-if="!count">
                    <el-empty description="没有查询到收藏信息..."></el-empty>
                </div> -->
            </div>
        </div>
    </div>
</template>
<script>
import { mapState } from "vuex";
export default {
    components: {},
    data() {
        return {
            product_list: [
            ],
            checkedAll: false,

            pagination: {
                page: 1,
                pageNum: 10,
            },
            count: 0,
            info:{},
            payTypeMap: {
              '0':'微信支付',
              '1':'支付宝支付',
              '2': '授信额度',
              '3': '账单周期',
              '4': "余额"
            },
            //订单状态 0待付款 1已付款/待发货 2已发货/待收货 3部分退款 4已关闭
            orderStatusMap: {
                '0': '待付款',
                '1': '待发货',
                '2': '待收货',
                '3': '部分退款',
                '4': '已关闭',
            },
            //结款状态 0待结款 1已结款 2部分结款
            paymentSettlementStatusMap: {
                '0': '待结款',
                '1': '已结款',
                '2': '部分结款',
            },
            totalObj:{},
            orderCode:'',
            orderStatus:'',
        };
    },

    computed: {
        checked_list() {
            return this.product_list.filter((v) => v.checked);
        },
        checked_number() {
            return this.checked_list.length;
        },
    },

    created() {
        this.setView();
        this.getData();
        this.getTotal();
    },

    methods: {
        setView() {
          this.$httpApi('/api/v1/salesman/company/info/'+this.$route.query.id,{},'get').then(res => {
            this.info =res.data;
          })
        },
        do_search(){
            this.pagination.page = 1;
            this.getData();
        },
        do_rest(){
            this.orderCode = '';
            this.orderStatus = '';
            this.getData();
        },
        getData(){
            this.$httpApi('/api/v1/salesman/company/order/list', {
                pageNum: this.pagination.page,
                pageSize: this.pagination.pageNum,
                companyId: this.$route.query.id,
                orderCode: this.orderCode ==''?null:this.orderCode,
                orderStatus: this.orderStatus ==''?null:this.orderStatus,
            },'get').then(res => {
                res.rows.forEach(v=>{
                    v.payTypeStr = this.payTypeMap[v.payType]
                    v.orderStatusStr = this.orderStatusMap[v.orderStatus];
                    v.paymentSettlementStatusStr = this.paymentSettlementStatusMap[v.paymentSettlementStatus];
                    v.settlementAmount = v.settlementAmount.toFixed(2);
                    v.surplusAmount = v.surplusAmount.toFixed(2);
                })
                this.product_list = res.rows;
                this.count = res.total;
            })
        },
        getTotal(){
            this.$httpApi('/api/v1/salesman/company/order/data',{
                companyId: this.$route.query.id,
            }, 'get').then(res => {
                this.totalObj = res.data;
            })
        },
        

        to_product(item) {
            this.$router.push({
                path: "/product-detail",
                query: {
                    id: item.inventoryId,
                },
            });
        },

        do_toggle_all() {
            this.checkedAll = !this.checkedAll;
            this.product_list.forEach((v) => (v.checked = this.checkedAll));
        },


        do_toggle_item(item) {
            //console.log("切换勾选", { ...item });
            item.checked = !item.checked;
            let hasNotChecked = this.product_list.some((v) => !v.checked);
            if (hasNotChecked) {
                this.checkedAll = false;
            } else {
                this.checkedAll = true;
            }
        },

        do_delete_checked() {
            if (!this.checked_number) {
                alertErr("请选择要移除收藏的商品");
                return;
            }
            let ids = this.checked_list.map((v) => v.id).join();
            this.confirm_cancel(ids)
        },

        //收藏 取消
        do_fav_cancel_item(item) {
            this.confirm_cancel(item.id)
        },

        confirm_cancel(ids) {
            this.$api({
                url: "/service.php",
                method: "get",
                data: {
                    action: "product_bathDelOperate",
                    operateType: 1,//行为类型：1-关注 2-足迹 此接口默认为 1-关注
                    productIds: ids
                },
            }).then((res) => {
                alert(res)
                if (res.code == 200) {
                    this.setView();
                }
            });
        }
    },
};
</script>

<style scoped lang="less">
.zongjie{
    padding:14px;
    background: #F5F5F5;
    div{
        font-weight: 500;
font-size: 14px;
color: #333333;
    }
    .mb10{
        margin-top: 10px;
    }
}
.content{
    padding-top: 10px;
    .el-col{
        margin-top:14px;
    }
    span{
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        
    }
}
.searchDiv {
    margin-bottom: 20px;

    span {
        font-weight: 400;
        font-size: 14px;
        color: #333333;
        line-height: 24px;
    }

    .mgr48 {
        margin-right: 48px;
    }

    .btn-search {
        width: 60px;
        height: 36px;
        background: #EF1F1F;
        border-radius: 4px 4px 4px 4px;
        font-weight: 400;
        font-size: 14px;
        color: #FFFFFF;
        line-height: 36px;
        text-align: center;
        margin-left: 10px;
    }
    .btn-reset{
        width: 60px;
height: 36px;
background: #FFFFFF;
border-radius: 4px 4px 4px 4px;
border: 1px solid #B8C4D1;
font-weight: 400;
font-size: 14px;
color: #707070;
line-height: 36px;
text-align: center;
margin-left: 10px;
    }

}

.img-check {
    cursor: pointer;

    &.check-0 {
        display: block;
    }

    &.check-1 {
        display: none;
    }
}

.checked {
    cursor: pointer;

    .check-0 {
        display: none !important;
    }

    .check-1 {
        display: block !important;
    }
}

.page {
    padding-bottom: 80px;

    .main-title {
        // display: flex;
        // align-items: center;
        // justify-content: space-between;
        padding:  32px;
        text-align: left;
        // height: 56px;
        // line-height: 56px;
        background: #ffffff;
        font-family: Poppins, Poppins;
        font-weight: bold;
        font-size: 16px;
        color: #333333;

    }

    .page-ctx {
        margin-top: 14px;
        padding: 46px 32px;
        background: #fff;

        .left{
            font-family: Poppins, Poppins;
            font-weight: bold;
            font-size: 16px;
            color: #333333;
            margin-bottom: 20px;
        }
    }
}

.bottom-info {
    margin-top: 20px;
    margin-bottom: 50px;
}


.fav-box {
    .fav-data-box{
        margin-top: 20px;
    }
    .fav-titles {
        // margin-bottom: 20px;
        padding: 0 24px;

        border: 1px solid #E5E5E5;
        height: 44px;
        background: #F5F5F5;


        font-family: OPPOSans, OPPOSans;
        font-weight: 400;
        font-size: 14px;
        color: #666666;



        .fav-check {
            user-select: none;
            cursor: pointer;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 14px;
            color: #666666;

            &.checked {
                color: #009F39;
            }


            img {
                width: 13px;
                margin-right: 8px;
            }
        }

        .fav-delete {
            margin-left: 40px;
            cursor: pointer;

            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 14px;
            color: #666666;

        }
    }


}


.fav-list {
    border: 1px solid #e5e5e5;
    border-top: none;

    .fav-item {
        display: flex;
        align-items: center;
        padding: 24px;
        border-bottom: 1px solid #e5e5e5;

        &:last-child {
            border-bottom: none;
        }

        .fav-check {
            width: 52px;
            text-align: left;

            img {
                width: 13px;
            }
        }

        .goods-img {
            cursor: pointer;

            img {
                width: 100px;
                height: 100px;
                border: 1px solid #eeeeee;
                overflow: hidden;
            }

            /deep/ img {
                width: 100px;
                height: 100px;
                object-fit: cover;
            }
        }

        .goods-title {
            flex: 1;
            text-align: left;
            padding-left: 15px;

            .text-1 {
                cursor: pointer;
                margin-bottom: 15px;
                font-weight: 500;
                font-size: 14px;
                color: #333333;

            }

            .text-2 {
                font-weight: 400;
                font-size: 14px;
                color: #999999;
                line-height: 18px;
            }
        }

        .goods-price {
            min-width: 150px;
            font-family: OPPOSans, OPPOSans;
            font-weight: 400;
            font-size: 14px;
            color: #4D4D4D;
            line-height: 24px;
        }


        .goods-actions {
            min-width: 300px;

            button {
                &+button {
                    margin-left: 32px;
                }

                &.btn-cancel {
                    font-weight: 400;
                    font-size: 14px;
                    color: #666666;
                }

                &.btn-detail {

                    width: 104px;
                    height: 32px;
                    background: #EF1F1F;
                    border-radius: 4px 4px 4px 4px;
                    font-weight: 400;
                    font-size: 14px;
                    color: #FFFFFF;
                    text-align: center;
                    line-height: 32px;
                }
            }
        }
    }
}
</style>

<style scoped lang="less" src="@/assets/h5css/user/myFavourite.less"></style>